<template>
<!-- pages/topicality/xiaofeiquan/xiaofeiquan.wxml -->
<view class="body">
  <view class="backboard">
    <!--<import src="../../../webview/contact.wxml"></import>-->
    <!-- <template is="inContact" data="{{showtk}}" /> -->
    <!-- 切换城市 -->
    <image src="http://imgbdb3.bendibao.com/whbdb/20211/30/20210130124025_22198.jpg" class="main-img" :style="'margin-bottom: ' + marginTop + 'px'">
      <!-- <view class="city-box"> -->
      <!-- <text>{{city}}</text> -->
      <!-- <image src="/images/dwicon.png"></image> -->
      <!-- </view> -->
      <!-- <view class="change-city flex col">
      <view class="city-border">
        <view class="city flex center flex-start">
          <text style="margin-left: 70rpx;">出发地:</text>
          <picker bindchange="bindProv" value="{{leavePindex}}" range="{{leaveProvPick}}" range-key="province">
            <view class="sel-city">
              <view class="picker">
                <text>{{leaveProvPick[leavePindex].province}}</text>
              </view>
              <image src="/images/dwicon.png"></image>
            </view>
          </picker>
          <picker bindchange="bindCity" value="{{leaveCindex}}" range="{{leaveProvPick[leavePindex].citylist}}"
            range-key="cityname">
            <view class="sel-city">
              <view class="picker">
                <text>{{leaveProvPick[leavePindex].citylist[leaveCindex].cityname}}</text>
              </view>
              <image src="/images/dwicon.png"></image>
            </view>
          </picker>
        </view>
        <view class="qu-select flex center flex-start">
          <picker mode="selector" class="" range="{{leaveQu}}" value="{{leaveQuIndex}}" bindchange="leaveQuChange">
            {{leaveQu[leaveQuIndex]}}
          </picker>
          <image class="icon-down" src="/images/dwicon.png"></image>
        </view>
      </view>
      <view class="city-border">
        <view class="city flex center flex-start">
          <text style="margin-left: 70rpx;">目的地:</text>
          <picker bindchange="bindToProv" value="{{pindex}}" range="{{provPick}}" range-key="province">
            <view class="sel-city">
              <view class="picker">
                <text>{{provPick[pindex].province}}</text>
              </view>
              <image src="/images/dwicon.png"></image>
            </view>
          </picker>
          <picker bindchange="bindToCity" value="{{cindex}}" range="{{provPick[pindex].citylist}}" range-key="cityname">
            <view class="sel-city">
              <view class="picker">
                <text>{{provPick[pindex].citylist[cindex].cityname}}</text>
              </view>
              <image src="/images/dwicon.png"></image>
            </view>
          </picker>
        </view>
        <view class="qu-select flex center flex-start">
          <picker mode="selector" class="" range="{{arriveQu}}" value="{{arriveQuIndex}}" bindchange="arriveQuChange">
            {{arriveQu[arriveQuIndex]}}
          </picker>
          <image class="icon-down" src="/images/dwicon.png"></image>
        </view>
      </view>
      <view class="tips-more">更多地区在持续添加中</view>
    </view> -->
      <!-- 新切换城市 -->
      <view class="selectCity-content">
        <view class="single-box">
          <view class="name">
            出发地
          </view>
          <view>
            <picker @tap="test" class="location-box" mode="multiSelector" @change="fromPickerChange" @columnchange="fromColumnChange" :value="multiIndex" :range="multiArray">
              <text>{{fromQu=='全部'? fromCity:fromQu}}</text>
              <image src="/static/images/tools/selicon.png"></image>
            </picker>
          </view>
          <view :class="'status ' + (detailInfo.chucheng=='可出城' ?'follow':'forbidden')">
            {{detailInfo.chucheng}}
          </view>
        </view>
        <image class="reserve" src="/static/images/reserve-icon.png" @tap="reserveLocation"></image>
        <view class="single-box">
          <view class="name">
            目的地
          </view>
          <view>
            <picker class="location-box" mode="multiSelector" @change="goPickerChange" @columnchange="goColumnChange" :value="multiIndex2" :range="multiArray2">
              <text :class="goCity=='请选择'? 'pChoose':''">{{goQu=='全部' ? goCity:goQu}}</text>
              <image src="/static/images/tools/selicon.png"></image>
            </picker>
          </view>
          <view :class="'status ' + (detailInfo.jincheng ?(detailInfo.jincheng=='可进城'?'follow':'forbidden'):'')">
            {{detailInfo.jincheng}}
          </view>
        </view>
      </view>
    </image>

    <!-- 展示出发城市到所有城市的隔离政策 -->
    <!-- <view class="content" wx:if="{{!showDetail}}">
    <view class="table-title flex around">
      <view class="title-text">出行路径</view>
      <view class="title-text">隔离政策</view>
      <view class="title-text">详情</view>
    </view>
    <view class="table">
      <view class="tr">
        <view class="td flex around {{item.over ? 'select' : ''}}" wx:for="{{geliInfo}}" wx:key="index" bindtap="detail" data-index="{{index}}">
          <view class="path flex center">
            <image src="/images/geli_down.png" class="arrow-down {{item.over ? 'up' : ''}}" />
            <view>{{item.leavecity}}-{{item.cityname}}</view>
          </view>
          <view class="mes {{item.over ? 'over' : ''}}">{{item.gov}}</view>
          <view class="detail" catchtap="openDetail" data-index="{{index}}">详情</view>
        </view>
        <view class="more flex center" wx:if="{{showMore}}" bindtap="showMoreInfo">
          <text>查看更多地区</text>
          <image src="/images/geli_more.png" class="more-down" />
        </view>
        <view class="tips">免责声明：本页面的信息仅供参考，数据来源官方，若前往某地街道社区或者村镇建议直接咨询当地政府部门</view>
      </view>
    </view>
  </view> -->
    <!-- 公告部分 -->
    <view class="announce-box" @tap="openAnnounce">
      <image class="horn" src="/static/images/horn.png"></image>
      <view class="intro">{{announce}}
      </view>
    </view>

    <!-- 展示点对点的隔离政策 -->
    <view class="in-out-box" v-if="detailInfo">
      <!-- 出发城市 -->
      <view class="in">
        <view class="subscribe">
          <subscribeMessaged :city="detailInfo.leavecity[0].leavecity" name="疫情信息通知" :text="subscribeText1" @subsuccess="subsuccess1" tepId="80am3NrdpPBRakHdE0QesZPD1mVnbzwJQQKMbHGf9Mc">
            <view :class="subscribeText1=='已订阅'? 'joined':''">
              <text>{{subscribeText1}}</text>
            </view>
          </subscribeMessaged>
          <image @tap="tip" class="subscribe-img" src="/static/images/dingyue-icon.png"></image>
        </view>
        <view class="city-name flex align-center">
          <image src="/static/images/in.png" class="in-icon" alt></image>
          <view class="hid">出{{fromCity}} {{fromQu=='全部'?'':fromQu}}</view>
        </view>
        <view class="city-content-box flex">
          <view class="city-content" style="width:100%;">
            <view class="city-content-detail">
              <!-- 当没有选择区时,显示出发城市风险等级 -->
              <navigator :url="'/pages/topicality/yqdengji/yqdengji?city=' + fromCityCode" :class="'lv ' + detailInfo.leave_level_city_dengji" v-if="fromQu == '全部'">
                {{detailInfo.leave_level_city ? detailInfo.leave_level_city : ''}} >
              </navigator>
              <navigator :url="'/pages/topicality/yqdengji/yqdengji?city=' + fromCityCode + '&qu=' + fromQu" :class="'lv ' + detailInfo.leave_level_qu_dengji" v-else>
                {{detailInfo.leave_level_qu ? detailInfo.leave_level_qu : ''}} >
              </navigator>
              <view :class="'message ' + (showMessage[0] ? 'show-messaeg' : '')" v-if="detailInfo.chu_leave.daoyu" @tap="showCityContentDetail" data-index="0">
                <text>{{detailInfo.chu_leave.daoyu}}</text>
                <view :class="showMessage[0] ? '' : 'block'"></view>
                <image :class="showMessage[0] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.chu_leave.daoyu" @tap="articleDetail" :data-key="detailInfo.chu_leave.arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
              <view class="none-message" v-if="!detailInfo.chu_leave.daoyu">数据更新中</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 进入城市 leavecity -->
      <view class="in out">
        <view class="subscribe">
          <subscribeMessaged :city="detailInfo.leavecity[0].cityname" name="疫情信息通知" :text="subscribeText2" @subsuccess="subsuccess2" tepId="80am3NrdpPBRakHdE0QesZPD1mVnbzwJQQKMbHGf9Mc">
            <view :class="' ' + (subscribeText2=='已订阅'? 'joined':'')"><text>{{subscribeText2}}</text></view>
          </subscribeMessaged>
          <image @tap="tip" class="subscribe-img" src="/static/images/dingyue-icon.png"></image>
        </view>
        <view class="city-name flex align-center">
          <image src="/static/images/out.png" class="in-icon" alt></image>
          <view class="hid">进{{detailInfo.leavecity[0].cityname}}</view>
        </view>
        <view class="city-content-box flex">
          <view class="city-content">
            <view class="city-content-detail">
              <navigator :url="'/pages/topicality/yqdengji/yqdengji?city=' + goCityCode" :class="'lv ' + detailInfo.arrive_level_city_dengji">
                {{detailInfo.arrive_level_city ? detailInfo.arrive_level_city : ''}} >
              </navigator>
              <view :class="'message ' + (showMessage[1] ? 'show-messaeg' : '')" v-if="detailInfo.leavecity[0].gov" @tap="showCityContentDetail" data-index="1">
                <text class="bold-tit">隔离/核酸规定：</text><text>{{detailInfo.leavecity[0].gov}}</text>
                <view :class="showMessage[1] ? '' : 'block'"></view>
                <image :class="showMessage[1] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.leavecity[0].gov" @tap="articleDetail" :data-key="detailInfo.leavecity[0].arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
              <view class="none-message" v-if="!detailInfo.leavecity[0].gov">数据更新中</view>
            </view>
            <view class="city-content-detail dengji-content">
              <view :class="'message ' + (showDengji[1] ? 'show-messaeg' : '')" v-if="detailInfo.leavecity[0].dengji" @tap="showDengjiDetail" data-index="1">
                <text class="bold-tit">登记/报备规定：</text><text>{{detailInfo.leavecity[0].dengji}}</text>
                <view :class="showDengji[1] ? '' : 'block'"></view>
                <image :class="showDengji[1] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.leavecity[0].dengji" @tap="articleDetail" :data-key="detailInfo.leavecity[0].dj_arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 进入区 leavequ -->
      <view class="in out-qu" v-if="goQu!='全部'">
        <view class="city-name flex align-center">
          <image src="/static/images/out.png" class="in-icon" alt></image>
          <view class="hid">进{{goQu=="全部"?'':goQu}}</view>
        </view>
        <view class="city-content-box flex">
          <view class="city-content">
            <view class="city-content-detail">
              <navigator :url="'/pages/topicality/yqdengji/yqdengji?city=' + goCityCode + '&qu=' + goQu" :class="'lv ' + detailInfo.arrive_level_qu_dengji">
                {{detailInfo.arrive_level_qu ? detailInfo.arrive_level_qu : ''}} >
              </navigator>
              <view :class="'message ' + (showMessage[2] ? 'show-messaeg' : '')" v-if="detailInfo.leavequ[0].gov" @tap="showCityContentDetail" data-index="2">
                <text class="bold-tit">隔离/核酸规定：</text><text>{{detailInfo.leavequ[0].gov}}</text>
                <view :class="showMessage[2] ? '' : 'block'"></view>
                <image :class="showMessage[2] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.leavequ[0].gov" @tap="articleDetail" :data-key="detailInfo.leavequ[0].arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
              <view class="none-message" v-if="!detailInfo.leavequ[0].gov">数据更新中</view>
            </view>
            <view class="city-content-detail dengji-content">
              <view :class="'message ' + (showDengji[2] ? 'show-messaeg' : '')" v-if="detailInfo.leavequ[0].dengji" @tap="showDengjiDetail" data-index="2">
                <text class="bold-tit">登记/报备规定：</text><text>{{detailInfo.leavequ[0].dengji}}</text>
                <view :class="showDengji[2] ? '' : 'block'"></view>
                <image :class="showDengji[2] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.leavequ[0].dengji" @tap="articleDetail" :data-key="detailInfo.leavequ[0].dj_arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 展示点对点返程隔离政策 -->
    <view class="in-out-box" v-if="detailInfo&&detailInfo.arrivecity[0].leavecity">
      <!-- 出发城市 -->
      <view class="in" v-if="detailInfo.arrivecity[0].leavecity">
        <view class="city-name flex align-center">
          <image src="/static/images/in.png" class="in-icon" alt></image>
          <view class="hid">
            出{{detailInfo.arrivecity[0].leavecity}} {{goQu=="全部"?'':goQu}}
          </view>
        </view>
        <view class="city-content-box flex">
          <view class="city-content" style="width:100%;">
            <view class="city-content-detail" @tap="showCityContentDetail">
              <navigator :url="'/pages/topicality/yqdengji/yqdengji?city=' + goCityCode" :class="'lv ' + detailInfo.arrive_level_city_dengji" v-if="goQu=='全部'">
                {{detailInfo.arrive_level_city ? detailInfo.arrive_level_city : ''}} >
              </navigator>
              <navigator :url="'/pages/topicality/yqdengji/yqdengji?city=' + goCityCode + '&qu=' + goQu" :class="'lv ' + detailInfo.arrive_level_qu_dengji" v-else>
                {{detailInfo.arrive_level_qu ? detailInfo.arrive_level_qu : ''}} >
              </navigator>
              <view :class="'message ' + (showMessage[3] ? 'show-messaeg' : '')" v-if="detailInfo.chu_arrive.daoyu" @tap="showCityContentDetail" data-index="3">
                <text>{{detailInfo.chu_arrive.daoyu}}</text>
                <view :class="showMessage[3] ? '' : 'block'"></view>
                <image :class="showMessage[3] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.chu_arrive.daoyu" @tap="articleDetail" :data-key="detailInfo.chu_arrive.arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
              <view class="none-message" v-if="!detailInfo.chu_arrive.daoyu">数据更新中</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 进入城市 leavecity -->
      <view class="in out" v-if="detailInfo.arrivecity[0].cityname">
        <view class="city-name flex align-center">
          <image src="/static/images/out.png" class="in-icon" alt></image>
          <view class="hid">进{{detailInfo.arrivecity[0].cityname}}</view>
        </view>
        <view class="city-content-box flex">
          <view class="city-content">
            <view class="city-content-detail">
              <navigator :url="'/pages/topicality/yqdengji/yqdengji?city=' + fromCityCode" :class="'lv ' + detailInfo.leave_level_city_dengji">
                {{detailInfo.leave_level_city ? detailInfo.leave_level_city : ''}} >
              </navigator>
              <view :class="'message ' + (showMessage[4] ? 'show-messaeg' : '')" v-if="detailInfo.arrivecity[0].gov" @tap="showCityContentDetail" data-index="4">
                <text class="bold-tit">隔离/核酸规定：</text><text>{{detailInfo.arrivecity[0].gov}}</text>
                <view :class="showMessage[4] ? '' : 'block'"></view>
                <image :class="showMessage[4] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.arrivecity[0].gov" @tap="articleDetail" :data-key="detailInfo.arrivecity[0].arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
              <view class="none-message" v-if="!detailInfo.arrivecity[0].gov">数据更新中</view>
            </view>
            <view class="city-content-detail dengji-content">
              <view :class="'message ' + (showDengji[3] ? 'show-messaeg' : '')" v-if="detailInfo.arrivecity[0].dengji" @tap="showDengjiDetail" data-index="3">
                <text class="bold-tit">登记/报备规定：</text><text>{{detailInfo.arrivecity[0].dengji}}</text>
                <view :class="showDengji[3] ? '' : 'block'"></view>
                <image :class="showDengji[3] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.arrivecity[0].dengji" @tap="articleDetail" :data-key="detailInfo.arrivecity[0].dj_arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 进入区 leavequ -->
      <view class="in out-qu" v-if="fromQu!='全部'">
        <view class="city-name flex align-center">
          <image src="/static/images/out.png" class="in-icon" alt></image>
          <view class="hid">进{{fromQu=='全部'?'':fromQu}}</view>
        </view>
        <view class="city-content-box flex">
          <view class="city-content">
            <view class="city-content-detail">
              <navigator :url="'/pages/topicality/yqdengji/yqdengji?city=' + fromCityCode + '&qu=' + fromQu" :class="'lv ' + detailInfo.leave_level_city_dengji">
                {{detailInfo.leave_level_city ? detailInfo.leave_level_city : ''}} >
              </navigator>
              <view :class="'message ' + (showMessage[5] ? 'show-messaeg' : '')" v-if="detailInfo.arrivequ[0].gov" @tap="showCityContentDetail" data-index="5">
                <text class="bold-tit">隔离/核酸规定：</text><text>{{detailInfo.arrivequ[0].gov}}</text>
                <view :class="showMessage[5] ? '' : 'block'"></view>
                <image :class="showMessage[5] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.arrivequ[0].gov" @tap="articleDetail" :data-key="detailInfo.arrivequ[0].arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
              <view class="none-message" v-if="!detailInfo.arrivequ[0].gov">数据更新中</view>
            </view>
            <view class="city-content-detail dengji-content">
              <view :class="'message ' + (showDengji[4] ? 'show-messaeg' : '')" v-if="detailInfo.arrivequ[0].dengji" @tap="showDengjiDetail" data-index="4">
                <text class="bold-tit">登记/报备规定：</text><text>{{detailInfo.arrivequ[0].dengji}}</text>
                <view :class="showDengji[4] ? '' : 'block'"></view>
                <image :class="showDengji[4] ?  'bottom-triangle-icon':'top-triangle-icon'" src="/static/images/tools/selicon.png"></image>
              </view>
              <view class="show-more-message" v-if="detailInfo.arrivequ[0].dengji" @tap="articleDetail" :data-key="detailInfo.arrivequ[0].dj_arr">
                查看全文
                <image src="/static/images/more.png" class="more-message" alt></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 出行交通政策查询 -->
    <view class="border-content">
      <view class="jc-title">
        {{fromCity}}出行交通政策查询
      </view>
      <view class="tab-bar flex">
        <view v-for="(item, index) in differentTitle" :key="index" :class="'bar-item ' + (index==curDiffIndex? 'chouse':'')" @tap="chooseDiffTab" :data-index="index">{{item}}</view>
      </view>
      <view class="border-detail">
        <view v-for="(question, index) in differentContent[curDiffTitle]" :key="index" class="questions-list">
          <view class="question-item" v-if="index<1">
            <view class="item-title flex align-center">
              <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/10/20210210170418_69054.png" alt></image>
              <!-- tools可以自定义 -->
              <view class="intro">
               {{question['标题']}}
              </view>
            </view>
            <view class="itme-detail">
              <p><rich-text :nodes="question['描述']||'...'"></rich-text></p>
              <a @tap="articleDetail" :data-key="question.arr">查看原文></a>
            </view>
          </view>
        </view>
        <view class="more" @tap="more">
          <span>查看更多</span>
        </view>
      </view>
    </view>
    <!-- 防疫工具箱 -->
    <fangyi-tools id="fangyiTools"></fangyi-tools>

    <mp-dialog title="公告" :show="showAnnounce" @buttontap="closeAnnounce" :buttons="[{text: '关闭弹窗'},{text:'查看详情'}]">
      <view style="font-size: 28rpx;">{{announce}}

      </view>
    </mp-dialog>
    <!-- 导粉 -->
    <view class="daofen" v-if="daofen">
      <rich-text :nodes="daofen.content" style="user-select:text;-webkit-user-select:text"></rich-text>
    </view>
  </view>
  <!-- 快捷导航 -->
  <!-- <fastnav qrcodeimg="{{qrcodeimg}}" citycode="{{citycode}}" showNav="{{showNav}}" showShare="{{showShare}}"></fastnav> -->
  <fixed-btn :city="fromCity" :path="'/pages/index/index?city=' + fromCityCode" image="/images/share-geli.jpg">
    <text slot="left">查看更多</text><text slot="right">本地资讯</text>
  </fixed-btn>
</view>
</template>

<script>
import util from "../../../../utils/util";
const app = getApp();
var QQMapWX = require("../../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
var allInfo = [];
var leaveCityData = {};
import fastnav from "../../../../component/fastnav/fastnav";
import subscribeMessaged from "../../../../component/subscribeMessaged/subscribeMessaged";
import mpDialog from "./weui-miniprogram/dialog/dialog";
import fangyiTools from "../../../../component/fangyiTools/fangyiTools";
import fixedBtn from "../../../../component/fixedBtn/fixedBtn";

export default {
  data() {
    return {
      citycode: "sz",
      city: '深圳',
      province: '广东',
      pindex: 0,
      cindex: 0,
      cityPick: ["选择城市"],
      showNav: true,
      // 快捷导航是否展开
      showShare: true,
      // 显示分享按钮
      leaveProvPick: [],
      leaveCityPick: [],
      leaveQu: ["请选择区县名称"],
      arriveQu: ["请选择区县名称"],
      provPick: [],
      leaveQuIndex: 0,
      arriveQuIndex: 0,
      leavePindex: 0,
      leaveCindex: 0,
      showMore: true,
      showDetail: false,
      detailInfo: "",
      leave: {
        "较低风险": "low",
        "低风险": "low",
        "中风险": "middle",
        "部分地区中风险": "middle",
        "高风险": "height",
        "较高风险": "height"
      },
      showMessage: [false, false, false, false, false, false],
      showDengji: [false, false, false, false],
      showAnnounce: false,
      //是否显示公告
      announce: '',
      //公告详情
      announceInfo: '',
      //公告地址
      toolArr: [],
      //工具箱
      subscribeText1: "+订阅城市",
      subscribeText2: "+订阅城市",
      showModalStatus: false,
      multiArray: [],
      multiIndex: [0, 0, 0],
      multiArray2: [],
      multiIndex2: [0, 0, 0],
      query1: [],
      query2: [],
      provinceArr: [],
      cityArr: [],
      quArr: [],
      fromCity: '深圳',
      fromCityCode: 'sz',
      fromQu: "全部",
      goCity: '请选择',
      goCityCode: '',
      goQu: "全部",
      differentTitle: [],
      //异地出行title数组
      differentContent: {},
      //异地出行内容
      curDiffIndex: 0,
      curDiffTitle: '',
      daofen: false,
      marginTop: "",
      showtk: false,
      infoData: "",
      geliInfo: "",
      qrcodeimg: ""
    };
  },

  components: {
    fastnav,
    subscribeMessaged,
    mpDialog,
    fangyiTools,
    fixedBtn
  },
  props: {},
  onLoad: function async(options) {
    this.render(options);
  },
  onShareAppMessage: function () {
    return {
      title: this.info.title ? this.info.title : "隔离政策查询"
    };
  },
  onShareTimeline: function () {
    return {
      title: this.data ? this.data.title : '隔离政策查询',
      imageUrl: this.data ? this.data.images : 'http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg'
    };
  },
  methods: {
    // 当出发地确认时
    async fromPickerChange(e) {
      if (this.multiArray[1][this.multiIndex[1]] == this.goCity) {
        uni.showToast({
          title: '请不要选择相同的城市',
          icon: 'none'
        });
        return;
      }

      this.setData({
        multiIndex: e.detail.value,
        fromCity: this.multiArray[1][this.multiIndex[1]],
        fromCityCode: await this.getCityCode(this.multiArray[1][this.multiIndex[1]]),
        fromQu: this.multiArray[2][this.multiIndex[2]]
      });
      this.getDetailInfoData();
    },

    // 当出发地列发生变化时
    fromColumnChange: function (e) {
      var data = {
        multiArray: this.multiArray,
        multiIndex: this.multiIndex
      };
      data.multiIndex[e.detail.column] = e.detail.value;

      switch (e.detail.column) {
        case 0:
          let cityArr = this.query1.filter(item => {
            return item.province == this.multiArray[0][e.detail.value];
          })[0].citylist.map(item => {
            return item.cityname;
          }).filter(item => {
            return item != "选择城市";
          });
          data.multiArray[1] = cityArr;
          let quArr = Object.values(this.query2[cityArr[0]].qu);
          quArr.unshift("全部");
          data.multiArray[2] = quArr;
          data.multiIndex[1] = 0;
          data.multiIndex[2] = 0;
          break;

        case 1:
          quArr = Object.values(this.query2[data.multiArray[1][e.detail.value]].qu);
          quArr.unshift("全部");
          data.multiArray[2] = quArr;
          data.multiIndex[2] = 0;
          break;
      }

      this.setData(data);
    },

    // 目的地确认时
    async goPickerChange(e) {
      if (this.fromCity == this.multiArray2[1][this.multiIndex2[1]]) {
        uni.showToast({
          title: '请不要选择相同的城市',
          icon: 'none'
        });
        return;
      }

      this.setData({
        multiIndex2: e.detail.value,
        // fromCity:this.data.multiArray2[2][this.data.multiIndex2[2]],
        // fromCityCode:'sz',
        // fromQu:'南山区',
        goCity: this.multiArray2[1][this.multiIndex2[1]],
        goCityCode: await this.getCityCode(this.multiArray2[1][this.multiIndex2[1]]),
        goQu: this.multiArray2[2][this.multiIndex2[2]]
      });
      this.getDetailInfoData();
    },

    // 当出发地列发生变化时
    goColumnChange: function (e) {
      var data = {
        multiArray2: this.multiArray2,
        multiIndex2: this.multiIndex2
      };
      data.multiIndex2[e.detail.column] = e.detail.value;

      switch (e.detail.column) {
        case 0:
          let cityArr = this.query1.filter(item => {
            return item.province == this.multiArray2[0][e.detail.value];
          })[0].citylist.map(item => {
            return item.cityname;
          }).filter(item => {
            return item != "选择城市";
          });
          data.multiArray2[1] = cityArr;
          let quArr = Object.values(this.query2[cityArr[0]].qu);
          quArr.unshift("全部");
          data.multiArray2[2] = quArr;
          data.multiIndex2[1] = 0;
          data.multiIndex2[2] = 0;
          break;

        case 1:
          quArr = Object.values(this.query2[data.multiArray2[1][e.detail.value]].qu);
          quArr.unshift("全部");
          data.multiArray2[2] = quArr;
          data.multiIndex2[2] = 0;
          break;
      }

      this.setData(data);
    },

    //渲染整个页面
    render(options) {
      util.getUrl(app.globalData.url).then(res => {
        this.getProvinceData(options.city || '');
        const query = uni.createSelectorQuery();
        setTimeout(() => {
          query.select('.change-city').boundingClientRect();
          query.selectViewport().scrollOffset();
          query.exec(res => {
            if (res[0]) this.setData({
              marginTop: res[0].height
            });
          });
        }, 200);
      });
    },

    // 获取公告
    getAnnounce(citycode) {
      util.request('zhuanti.php', {
        action: "geli_notice",
        citycode: citycode
      }, "POST").then(e => {
        this.setData({
          announce: e.data.data.daoyu,
          announceInfo: e.data.data.arr
        });
      });
    },

    // 打开和关闭公告
    openAnnounce() {
      this.setData({
        showAnnounce: true
      });
    },

    closeAnnounce(e) {
      if (e.detail.index == 0) {
        this.setData({
          showAnnounce: false
        });
      }

      if (e.detail.index == 1) {
        this.announceInfo.id ? uni.navigateTo({
          url: `/pages/article/detail/detail?id=${this.announceInfo.id}&city=${this.announceInfo.citycode}&type=${this.announceInfo.type}`
        }) : uni.showToast({
          title: '暂时还没有这个公告详情哦',
          icon: 'none'
        });
      }
    },

    // 提示
    tip() {
      uni.showModal({
        title: '订阅内容',
        content: '1、全国疫情风险等级变更\r\n2、疫情相关政策变更告知\r\n3、城市疫情热点告知\r\n4、隔离核酸规定政策告知'
      });
    },

    // 订阅成功
    subsuccess1() {
      this.setData({
        subscribeText1: "已订阅"
      });
    },

    subsuccess2() {
      this.setData({
        subscribeText2: "已订阅"
      });
    },

    // 检查是否订阅
    check(city, num) {
      util.request("sub_message.php", {
        action: "check",
        name: "疫情信息通知",
        city: city,
        openid: uni.getStorageSync("openid")
      }, "POST").then(res => {
        switch (num) {
          case 1:
            this.setData({
              subscribeText1: res.data.state == 0 ? "+订阅城市" : "已订阅"
            });
            break;

          case 2:
            this.setData({
              subscribeText2: res.data.state == 0 ? "+订阅城市" : "已订阅"
            });
            break;
        }
      });
    },

    // 前往工具箱详情
    toTool(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid || '';

      if (path) {
        if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1 && !appid) {
          this.setData({
            showtk: true
          });
          util.navContact(linkname, path);
        } else {
          util.navMethod(path, appid);
        }
      } else {
        uni.showToast({
          title: '还没有这个入口哦~',
          icon: 'none'
        });
      }
    },

    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city;
          let province = res.result.address_component.province;
          let provinceIndex, cityIndex, toProvinceIndex; // let city="芜湖市";

          let citydata;

          if (province && city) {
            let findProvince = this.leaveProvPick.filter(pro => province.includes(pro.province))[0];
            provinceIndex = this.leaveProvPick.findIndex(pro => province.includes(pro.province)); // toProvinceIndex = this.data.provPick.findIndex(pro => province.includes(pro.province));

            if (findProvince) {
              citydata = findProvince.citylist.filter(findCity => city.includes(findCity.cityname))[0];
              cityIndex = findProvince.citylist.findIndex(findCity => city.includes(findCity.cityname));
            }
          }

          if (citydata != '' && city.indexOf(this.city) == -1) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '隔离政策查询？',
              success: res => {
                if (res.confirm) {
                  this.setData({
                    city: citydata.cityname,
                    citycode: citydata.citycode,
                    province,
                    leavePindex: provinceIndex,
                    leaveCindex: cityIndex,
                    // pindex: toProvinceIndex,
                    cindex: 0,
                    fromCity: citydata.cityname,
                    fromCityCode: citydata.citycode
                  });
                  this.getQrcode();
                  this.bindCity({
                    detail: {
                      value: this.leaveCindex
                    }
                  });
                }
              }
            });
          }
        }
      });
    },

    getInfoData() {
      util.request('zhuanti.php', {
        action: "geli_all",
        type: "city",
        citycode: this.citycode
      }).then(res => {
        if (res.data.data.data) {
          res.data.data.data.forEach(item => item.over = false);
          this.info = res.data.data;

          if (res.data.data.hasOwnProperty("daofen") && res.data.data.daofen) {
            res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"');
          }

          this.setData({
            infoData: res.data.data.data,
            daofen: res.data.data.daofen
          });
          this.title = res.data.data.title;
          let data = this.infoData.filter(item => item.leavecity == this.city).slice(0, 5);

          if (this.infoData.length > 5 && data.length >= 5) {
            this.setData({
              showMore: true
            });
          }

          allInfo = this.infoData.filter(item => item.leavecity == this.city);
          this.setData({
            geliInfo: data
          });
        }
      });
    },

    showMoreInfo() {
      this.setData({
        geliInfo: allInfo,
        showMore: false
      });
    },

    // 出行政策选择tab
    chooseDiffTab(e) {
      if (this.curDiffIndex == e.currentTarget.dataset.index) {
        return;
      }

      this.setData({
        curDiffIndex: e.currentTarget.dataset.index,
        curDiffTitle: this.differentTitle[e.currentTarget.dataset.index]
      });
    },

    // 查看更多进出政策
    more() {
      uni.navigateTo({
        url: '/pages/topicality/chuxingtraffic/chuxingtraffic'
      });
    },

    // 渲染进出政策
    renderjczhengce(citycode) {
      util.request('zhuanti.php', {
        action: 'jczhengce',
        citycode: citycode
      }).then(e => {
        this.setData({
          differentContent: e.data.data.list || [],
          differentTitle: e.data.data.data || [],
          curDiffTitle: e.data.data.data[0] || 0
        });
      });
    },

    // 获取cityCode,参数为市
    async getCityCode(city) {
      const res = await util.request("citycode.php", {
        action: "city",
        city: city
      }, "POST");
      return res.data.data[0].citycode;
    },

    // 颠倒出发地和目的地
    reserveLocation() {
      const fromCity = this.fromCity;
      const fromCityCode = this.fromCityCode;
      const fromQu = this.fromQu;
      let data = {
        fromCity: this.goCity,
        fromCityCode: this.goCityCode,
        fromQu: this.goQu,
        goCity: fromCity,
        goCityCode: fromCityCode,
        goQu: fromQu
      };
      const arr = Object.values(data).filter(item => {
        return item == "请选择";
      });

      if (arr.length == 0) {
        this.setData(data);
        this.getDetailInfoData();
      } else {
        uni.showToast({
          title: '请选择出发地或目的地',
          icon: 'none'
        });
      }
    },

    // 获取省市区
    getProvinceData(optcode) {
      let data = {
        action: "geli_all_qu",
        type: "city",
        citycode: optcode ? optcode : this.citycode
      };
      util.request('zhuanti.php', data).then(res => {
        let query1 = res.data.data.cityname.city;
        let query2 = res.data.data.qu;
        this.setData({
          query1,
          query2
        });
        let provinceArr = query1.map(item => {
          return item.province;
        });
        let cityArr = query1[0].citylist.map(item => {
          return item.cityname;
        });
        let quArr = Object.values(query2[cityArr[0]].qu);
        quArr.unshift("全部");
        let data = {
          multiArray: this.multiArray,
          multiArray2: this.multiArray2
        };
        data.multiArray[0] = provinceArr;
        data.multiArray[1] = cityArr;
        data.multiArray[2] = quArr;
        data.multiArray2[0] = provinceArr;
        data.multiArray2[1] = cityArr;
        data.multiArray2[2] = quArr;
        this.setData(data);

        if (res.data.data) {
          this.qu = res.data.data.qu;

          if (res.data.data.cityname) {
            res.data.data.cityname.city.unshift({
              province: "请选择",
              citylist: []
            });
            res.data.data.cityname.city.forEach(citys => {
              citys.citylist.unshift({
                cityname: "选择城市"
              });
            });
          }

          if (res.data.data.leave && res.data.data.leave.city) res.data.data.leave.city.forEach(citys => {
            citys.citylist.unshift({
              cityname: "选择城市"
            });
          });
          this.setData({
            leaveProvPick: this.leaveProvPick.length ? this.leaveProvPick : res.data.data.leave.city,
            provPick: this.provPick.length ? this.provPick : res.data.data.cityname.city,
            infoData: res.data.data.leavecity
          });
          this.info = res.data.data;
          let leavePindex = this.leaveProvPick.findIndex(item => item.province == this.province) ? this.leaveProvPick.findIndex(item => item.province == this.province) : 0;
          let leaveCindex = this.leaveProvPick[leavePindex].citylist.findIndex(item => item.cityname == this.city); // let toPindex = this.data.provPick.findIndex(item => item.province == this.data.province) ? this.data.provPick.findIndex(item => item.province == this.data.province) : 0;

          this.setData({
            leavePindex,
            leaveCindex // pindex: toPindex,

          });
          if (res.data.data.leave.city && optcode) res.data.data.leave.city.forEach(provinces => provinces.citylist.forEach(city => {
            if (city.citycode == optcode) this.setData({
              leavePindex: this.leaveProvPick.findIndex(item => item.province == provinces.province),
              leaveCindex: this.leaveProvPick[this.leaveProvPick.findIndex(item => item.province == provinces.province)].citylist.findIndex(item => item.citycode == optcode),
              city: city.cityname,
              citycode: city.citycode
            });
          }));
          let data = this.infoData.filter(item => item.leavecity == this.city).slice(0, 5);

          if (res.data.data.qu[this.city]) {
            let leaveQu = Object.keys(res.data.data.qu[this.city].qu);
            leaveQu.unshift("请选择区县名称");
            this.setData({
              leaveQu
            });
          }

          data.forEach(item => item.over = false);

          if (this.infoData.length > 5) {
            allInfo = this.infoData.filter(item => item.leavecity == this.city);
            this.setData({
              showMore: true
            });
          }

          if (res.data.data.hasOwnProperty("daofen") && res.data.data.daofen) {
            res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
          }

          this.setData({
            // geliInfo: data,
            daofen: res.data.data.daofen
          });
          if (!optcode) this.getLocation();
        } else {
          uni.showToast({
            title: '当前城市暂无隔离信息',
            icon: 'none'
          });
        }

        this.getDetailInfoData();
      });
    },

    bindProv(e) {
      this.setData({
        leavePindex: e.detail.value,
        leaveCindex: 0,
        leaveQu: ["请选择区县名称"],
        leaveQuIndex: 0
      });
    },

    bindToProv(e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0,
        geliInfo: allInfo.filter(item => item.leavecity == this.city).slice(0, 5),
        showMore: true,
        showDetail: false,
        arriveQu: ["请选择区县名称"],
        arriveQuIndex: 0
      });
    },

    bindCity(e) {
      let cityData;
      this.setData({
        leaveCindex: e.detail.value ? e.detail.value : 0,
        leaveQuIndex: 0
      });

      if (e.detail.value != 0) {
        this.getDetailInfoData();
        cityData = this.leaveProvPick[this.leavePindex].citylist[e.detail.value];

        if (cityData) {
          let leaveQu;

          if (this.qu[cityData.cityname]) {
            leaveQu = Object.keys(this.qu[cityData.cityname].qu);
            leaveQu.unshift("请选择区县名称");
          }

          this.setData({
            citycode: cityData.citycode,
            city: cityData.cityname,
            leaveQu
          });
        }

        if (this.cindex != 0) this.getDetailInfoData();else this.getInfoData();
      } else this.setData({
        leaveQu: ["请选择区县名称"],
        leaveQuIndex: 0
      });
    },

    // 渲染详情
    getDetailInfoData() {
      let data = {
        action: "geli_all_qu",
        type: "city"
      };
      data.citycode = this.fromCityCode; //出发地城市code

      data.leavequ = this.fromQu == '全部' ? '' : this.fromQu; //出发地区县

      data.arrive = this.goCityCode; //目的地城市code

      data.arrivequ = this.goQu == '全部' ? '' : this.goQu; //目的地区县

      this.getAnnounce(data.citycode);
      this.renderjczhengce(data.citycode);
      this.selectComponent("#fangyiTools").getTools(data.cityCode);
      util.request("zhuanti.php", data, "POST").then(res => {
        if (res.data.data) {
          res.data.data.leavecity ? this.check(res.data.data.leavecity[0].leavecity, 1) : '';
          res.data.data.leavecity ? this.check(res.data.data.leavecity[0].cityname, 2) : '';
          this.setData({
            detailInfo: res.data.data
          });
        }
      });
    },

    leaveQuChange(e) {
      this.setData({
        leaveQuIndex: e.detail.value
      });
      this.getDetailInfoData();
    },

    arriveQuChange(e) {
      this.setData({
        arriveQuIndex: e.detail.value
      });
      this.getDetailInfoData();
    },

    // 获取城市公众号二维码
    getQrcode() {
      util.cityConfig(this.citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
    },

    detail(e) {
      let index = e.currentTarget.dataset.index;
      this.geliInfo[index].over = !this.geliInfo[index].over;
      this.setData({//[`geliInfo[${index}]`]: this.data.geliInfo[index]
      });
      //try fix
      this[`geliInfo[${index}]`] = this.geliInfo[index];
    },

    openDetail(e) {
      let data = this.geliInfo[e.currentTarget.dataset.index];
      if (data.arr.id) uni.navigateTo({
        url: `/pages/article/detail/detail?id=${data.arr.id}&type=${data.arr.type}&city=${data.arr.citycode ? data.arr.citycode : this.citycode}`
      });else {
        this.setData({
          showtk: true
        });
        util.navContact(this.detailInfo.title, data.url);
      }
    },

    // 隔离/核酸详情展示
    showCityContentDetail(e) {
      let index = util.getValue("index", e);
      this.showMessage[index] = !this.showMessage[index];
      this.setData({
        showMessage: this.showMessage
      });
    },

    // 登记/报备规定展示
    showDengjiDetail(e) {
      let index = util.getValue("index", e);
      this.showDengji[index] = !this.showDengji[index];
      this.setData({
        showDengji: this.showDengji
      });
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    articleDetail(e) {
      let data = util.getValue("key", e);

      if (data) {
        if (data.id) uni.navigateTo({
          url: `/pages/article/detail/detail?id=${data.id}&city=${data.citycode}&type=${data.type}`
        });else {
          this.setData({
            showtk: true
          });
          util.navContact(this.detailInfo.title, data.url);
        }
      }
    },

    onPageScroll: function (e) {
      if (this.showNav) this.setData({
        showNav: false
      });
    },

    test() {
      console.log("占位：函数 test 未声明");
    }

  }
};
</script>
<style>
/* pages/topicality/xiaofeiquan/xiaofeiquan.wxss */
.body {
    padding-bottom: 80rpx;
}

.backboard {
    background-color: #F6F6F6;
}

.main-img {
    width: 100%;
    height: 276rpx;
    margin-bottom: 200rpx;
}

.city-box {
    background: #ffffff;
    border-radius: 35rpx;
    padding: 10rpx 30rpx;
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    display: flex;
    align-items: center;
}

.city-box text {
    font-size: 30rpx;
    font-weight: bolder;
}

.city-box image {
    width: 23rpx;
    height: 15rpx;
    margin-left: 10rpx;
}

.change-city {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 20rpx;
    padding: 30rpx 0rpx;
    position: absolute;
    top: 235rpx;
    width: 90%;
    margin-left: 36rpx;
    display: flex;
    align-items: flex-start;
}

.change-city text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    width: 102rpx;
    text-align: center;
    white-space: nowrap;
}

.sel-city {
    display: flex;
    align-items: center;
    margin-left: 80rpx;
}

.sel-city image,
.icon-down {
    width: 19rpx;
    height: 10rpx;
    margin-left: 15rpx
}

.content {
    margin-bottom: 30rpx;
    font-size: 26rpx;
}

.content .arrow-down {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
}

.content .table .tr {
    margin: 20rpx;
}

.content .table .tr .td .mes {
    width: 50%;
}

.content .table .tr .td .path {
    overflow: hidden;
}

.content .table .tr .td {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 73rpx;
    margin: 29rpx 0;
    padding: 29rpx;
    border-radius: 8rpx;
    background: #fafafa;
}

.content .select {
    background: #fff;
    border: .5px solid #eee;
    box-shadow: 0 10rpx 38rpx 0 rgba(0, 0, 0, .05);
}

.content .over {
    display: flex !important;
}

.content .up {
    transform: rotate(180deg)
}

.content .mes {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0 5rpx;
}

.content .detail {
    color: #5195DD;
}


/* 查看更多 */

.see-more {
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
}

.see-more view {
    background-color: #EEEEEE;
    padding: 20rpx 40rpx;
    font-size: 26rpx;
    border-radius: 12rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #141414;
    text-align: center;
    width: 200rpx;
}


/* 导粉 */

.daofen {
    margin-top: 80rpx;
    text-align: center;
}

.p_class {
    margin: 10rpx 30rpx;
    line-height: 50rpx;
}

.more {
    height: 85rpx;
    margin: 0 29rpx;
    line-height: 85rpx;
    font-size: 29rpx;
    color: #2696ff;
    letter-spacing: 2rpx;
    text-align: center;
    font-weight: 700;
    background-color: #f6f6f6;
    border-radius: 19rpx;
}

.more-down {
    width: 46rpx;
    height: 46rpx;
}

.tips-more {
    width: 100%;
    padding-bottom: 20rpx;
    padding-top: 30rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;
}


.fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: auto;
    background: #fff;
    padding: 10rpx 0;

}

.share {
    width: 35%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 56rpx;
    color: #ffffff;
    font-weight: 500;
    background-color: #5395DE;
    margin-left: 20rpx;
}

.share view {
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-icon {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
}

.other-city {
    width: 65%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border: 0;
    border-radius: 56rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-top: 10rpx;
    color: #ffffff;
    background: #5395DE;
}

.city:first-child {
    margin-bottom: 30rpx;
}

.tips {
    margin-top: 20rpx;
    padding: 0 20rpx 20rpx 20rpx;
    line-height: 24rpx;
    font-size: 24rpx;
    color: #666;
    text-align: left;
}

.in-out-box {
    width: 702rpx;
    margin: 0 auto;
    margin-bottom: 43rpx;
    border-bottom: 2rpx solid #F3F3F3;
    background: #ffffff;
    border-radius: 22rpx;
    padding: 41rpx 26rpx 47rpx 23rpx;
    box-sizing: border-box
}

.city-name {
    margin-bottom: 9rpx;
    font-size: 36rpx;
    font-weight: 700;
   
}

.lv {
    min-width: 84rpx;
    height: 36rpx;
    line-height: 36rpx;
    font-size: 22rpx;
    text-align: center;
    border-radius: 5rpx;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    margin-top: 2rpx;
    margin-bottom: 16rpx;
}

.low {
    padding: 0 16rpx;
    height: 37rpx;
    background: rgba(76, 193, 65, 0.2);
    border-radius: 19rpx;
    font-size: 22rpx;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    line-height: 37rpx;
    color: rgba(76, 193, 65, 1);
    letter-spacing: .75px;
}

.middle {
    color: #4B98F8;
    border: 2rpx solid rgba(75, 152, 248, 0.60);
}

.height {
    padding: 0 16rpx;
    height: 37rpx;
    background: rgba(252, 56, 56, 0.2);
    border-radius: 19rpx;
    font-size: 22rpx;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    line-height: 37rpx;
    color: rgba(252, 56, 56, 1);
    letter-spacing: .75px;
}

.in-icon,
.out-icon {
    width: 52rpx;
    height: 54rpx;
    flex-shrink: 0;
    margin-right: 21rpx;
}

.city-content-box {
    font-size: 27rpx;
}

.city-content-box {
    margin-left: 27rpx;
}

.city-content-detail {
    border-radius: 14rpx;
}

.show-more-message {
    display: block;
    margin-top: 25rpx;
    color: #3887D9;
}

.more-message {
    width: 11rpx;
    height: 20rpx;
    margin-left: 14rpx;
}

.message {
    width: 562rpx;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    padding: 0 5rpx;
    line-height: 44rpx;
    color: #333333;
    position: relative;
    font-size: 28rpx;
}

.message .top-triangle-icon {
    position: absolute;
    width: 22rpx;
    height: 15rpx;
    right: 0;
    bottom: 16rpx;
}

.message .bottom-triangle-icon {
    position: absolute;
    width: 22rpx;
    height: 15rpx;
    z-index: 88;
    right: 0;
    bottom: 16rpx;
    transform: rotate(180deg);
    transition: 0.5s;
}

.message .block {
    position: absolute;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #FFFFFF 80%);
    background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
    width: 160rpx;
    height: 44rpx;
    bottom: 0;
    right: 0;
}

.show-all {
    display: block;
}

.out {
    margin-top: 10rpx;
}



.in .city-content {
    margin-top: 5rpx;
    margin-bottom: 25rpx;
    padding-left: 38rpx;
    border-left: 3rpx dashed #e2e2e2;
}

.out-qu .city-content {
    border: 0;
}

.qu-select {
    float: right;
    width: 325rpx;
    height: 53rpx;
    margin-right: 74rpx;
    padding-left: 33rpx;
    line-height: 53rpx;
    font-size: 25rpx;
    text-align: left;
    border-radius: 26rpx;
    border: none;
    background-color: #F0EEF2;
}

.qu-select picker {
    width: 80%;
}

.city-border {
    width: 100%;
}

.city-border:first-child {
    margin-bottom: 59rpx;
}

.show-messaeg {
    display: block;
}

/* 公告部分 */
.announce-box {
    padding: 10rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 702rpx;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 22rpx;
    box-sizing: border-box;
    padding-left: 29rpx;
    padding-right: 38rpx;
    margin-bottom: 20rpx;
    margin-top: 94rpx;
}

.announce-box .horn {
    width: 38rpx;
    height: 32rpx;
}

.announce-box .intro {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    width: 568rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.tit {
    line-height: 32rpx;
    font-size: 34rpx;
    font-family: PingFang SC Bold, PingFang SC Bold-Bold;
    font-weight: 700;
    text-align: left;
    color: #333333;

}

/* 防疫工具箱 */
.fangyi-tools {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 42rpx 0 20rpx 43rpx;
    width: 702rpx;
    background: #ffffff;
    border-radius: 22rpx;
}

.fangyi-tools .tools-content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
}

.fangyi-tools .tools-content .single-box {
    width: 147rpx;
    margin-right: 14rpx;
    margin-bottom: 26rpx;
    text-align: center;
}

.fangyi-tools .tools-content .single-box:nth-child(4n) {
    margin-right: 0;
}

.fangyi-tools .tools-content .single-box image {
    width: 102rpx;
    height: 102rpx;
    margin-bottom: 11rpx;
}

.fangyi-tools .tools-content .single-box .name {
    line-height: 23rpx;
    font-size: 24rpx;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    text-align: center;
    color: #000000;
}

.subscribe {
    display: flex;
    position: absolute;
    top: 10rpx;
    right: 14rpx;
    color: #3887d9;
    font-size: 24rpx;
    align-items: center;
}
.subscribe-img{
    width: 30rpx;
    height: 30rpx;
    margin-left: 19rpx;
}
.in {
    position: relative;
}

.joined {
    color: #333333;
}

.bottom-mask {
    position: fixed;
    bottom: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, .4);
}

.bottom-share-box {
    position: fixed;
    bottom: 0;
    height: 380rpx;
    width: 100%;
    justify-content: space-between;
    padding-top: 80rpx;
    background-color: rgb(251, 253, 250);
    border-top-left-radius: 54rpx;
    border-top-right-radius: 54rpx;
    overflow-x: hidden;
    z-index: 999999;
}

.bottom-share-box .flex {
    padding: 20rpx 20%;
    z-index: 99;
    box-sizing: border-box;
}

.bottom-share-box .share-box-img {
    width: 100rpx;
    margin-bottom: 16rpx;
}

.bottom-share-box .share-box-path {
    font-size: 24rpx;
}

.bottom-share-box .flex {
    width: 100%;
}

.line {
    height: 60rpx;
    border-right: 2rpx solid #ccc;
}

.cancel {
    width: 100%;
    height: 102rpx;
    margin-top: 30rpx;
    line-height: 102rpx;
    font-size: 34rpx;
    text-align: center;
    background-color: #FFFFFF;
}

button {
    padding: 0;
    margin: 0;
    background-color: transparent;
}

.share-box {
    margin-bottom: 60rpx;
    margin-top: 40rpx;
}

.share-box-img {
    width: 100rpx;
    height: 100rpx;
}

.shar-box-item {
    line-height: normal;
}

.share-box-title {
    width: 100%;
    margin-bottom: 58rpx;
    font-size: 32rpx;
    color: #BFBFBF;
    text-align: center;
}

.share-box-path {
    font-size: 22rpx;
    color: #141414;
}

.shar-box-list {
    width: 70%;
}

.selectCity-content {
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 20rpx;
    padding: 30rpx 0rpx;
    position: absolute;
    top: 235rpx;
    left: 50%;
    margin-left: -356rpx;
    width: 702rpx;
    height: 320rpx;
    display: flex;
    align-items: center;
    text-align: center;
}

.selectCity-content .single-box {
    flex: 1;
}

.selectCity-content .single-box .name {
    line-height: 29rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #999999;
}

.selectCity-content .single-box .location-box {
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 37rpx;
    margin-bottom: 33rpx;
}


.selectCity-content .single-box .location-box text{
    font-weight: 700;
    font-size: 48rpx;
    line-height: 45rpx;
    margin-right: 21rpx;
}
.selectCity-content .single-box .location-box image {
    width: 16rpx;
    height: 11rpx;
    margin-bottom: 9rpx;
}

.selectCity-content .single-box .status {
    height: 40rpx;
    max-width: 132rpx;
    
    border-radius: 22rpx;
    font-size: 22rpx;
    font-weight: 500;
    text-align: center;
    line-height: 40rpx;
   
    margin: 0 auto;
}
.selectCity-content .single-box .follow{
    color: #2fbd51;
    border: 2rpx solid rgba(76, 193, 65, 0.60);
}
.selectCity-content .single-box .forbidden{
    color: #f04141;
    border: 2rpx solid rgba(255,51,51,0.60);
}
.selectCity-content .reserve {
    width: 56rpx;
    height: 42rpx;
}

.pChoose{
    color: #C0C0CE;
}
.bold-tit{
    font-weight: bold;
    font-size: 32rpx;
}
.dengji-content{
    margin-top: 40rpx;
}

/* 出行政策 */
.jc-title{
    font-size: 28rpx;
    color: #000000;
    font-weight: 700;
    margin-bottom: 34rpx;
}
.border-content {
    box-sizing: border-box;
    width: 702rpx;
    margin: 0 auto;
    margin-bottom: 34rpx;
    padding: 28rpx 25rpx;
    background-color: #FFFFFF;
    border-radius: 22rpx;
  }
  
  .tab-bar {
    margin-bottom: 48rpx;
    overflow-x: scroll;
  }
  
  .bar-item {
    height: 75rpx;
    min-width: 143rpx;
    margin-right: 12rpx;
    line-height: 75rpx;
    font-size: 29rpx;
    text-align: center;
    background-color: #F9FBFC;
    border-radius: 18rpx;
  }
  
  .chouse {
    height: 84rpx;
    line-height: 84rpx;
    color: #FFFFFF;
    background-color: #FFFFFF;
    background-image: url("http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209104131_39076.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  
  .question-item {
    margin-bottom: 37rpx;
  }
  
  .item-title {
    margin-bottom: 25rpx;
    font-size: 33rpx;
    font-weight: 700;
  }
  
  .item-title image {
    display: inline-block;
    width: 37rpx;
    height: 37rpx;
    margin-right: 19rpx;
  }
  
  .itme-detail {
    padding-left: 27rpx;
    padding-bottom: 31rpx;
    overflow: hidden;
    background-color: #F9FBFC;
    border-radius: 18rpx;
  }
  
  .itme-detail a {
    color: #3887D9;
    font-size: 28rpx;
  }
  
  .itme-detail p {
    display: -webkit-box;
    margin: 26rpx 27rpx;
    margin-left: 0;
    margin-bottom: 29rpx;
    font-size: 27rpx;
    line-height: 45rpx;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: pre-wrap;
  }
  
</style>